@(crawlLog: uk.bl.monitrix.model.CrawlLog)

@import tags.navbar

@main("Monitrix - Crawl Timeline") {
  @navbar("/timeline")
} {
  <div class="container-fluid">
    <div class="row-fluid">
      <!-- Sidebar -->
      <div class="span3" style="position:relative; left:-15px; padding-right:15px;">
        <span class="label" style="padding:10px 20px;">
              @if(crawlLog.isIdle) {
                IDLE...
              } else {
                CRAWLING...
              }
        </span>
        <small>
          <table class="table table-condensed unstyled" style="margin-top:20px;">
            <tr><td>Started</td><td>@{new Date(crawlLog.getCrawlStartTime()).format("dd MMM yy, hh:mm a")}</td></tr>
            <tr><td>Last Activity</td><td>@{new Date(crawlLog.getTimeOfLastCrawlActivity()).format("dd MMM yy, hh:mm a")}</td></tr>
            
            <!-- TODO implement duration formatting as a custom tag -->
            <tr><td>Crawl Duration</td><td>@{crawlLog.getCrawlDuration() / (1000 * 60 * 60);} hours</td></tr>
            <tr><td>URLs Crawled</td><td id="total-urls-crawled"></td></tr>
            <tr><td>Data Volume</td><td id="total-data-volume"></td></tr>
          </table>
        </small>
      </div>
      
      <!-- Content -->
      <div class="span9" style="max-width:850px;">
        <div class="row-fluid">
          <div class="span6">
            <p class="pull-left">Data Volume</p>
            <div class="btn-group pull-right" style="margin-right:35px;" data-toggle="buttons-radio">
              <button type="button" class="btn btn-mini btn-selected" onclick="redraw('graph-volume', true);">Cumulative</button>
              <button type="button" class="btn btn-mini" onclick="redraw('graph-volume', false);">Timeseries</button>
            </div>           
            
            <div class="monitrix-barchart-container-small">      
              <div style="display:inline-block;">
                <span class="monitrix-barchart-y-label-small">Data Volume [Bytes]</span>
              </div>
              
              <div class="monitrix-barchart-container-right-small">  
                <div class="monitrix-barchart-axis-area-small" id="graph-volume-axis"></div>
                <div class="monitrix-barchart-chart-area-small" id="graph-volume"></div>
              </div>
              
              <div class="monitrix-barchart-x-label-small">
                Time
                <!-- p style="float:right;">
                  <a title="View Fullscreen" href="javascript:$(createLightBox('/api/timeline/datavolume')).lightbox_me({destroyOnClose: true});">
                    <i class="icon-fullscreen"></i>
                  </a>
                </p -->
              </div>
            </div>
          </div>
            
          <div class="span6">
            <p class="pull-left">Number of URLs Crawled</p>
            <div class="btn-group pull-right" style="margin-right:35px;" data-toggle="buttons-radio">
              <button type="button" class="btn btn-mini btn-selected" onclick="redraw('graph-urls', true);">Cumulative</button>
              <button type="button" class="btn btn-mini" onclick="redraw('graph-urls', false);">Timeseries</button>
            </div>
            
            <div class="monitrix-barchart-container-small">      
              <div style="display:inline-block;">
                <span class="monitrix-barchart-y-label-small">No. of URLs</span>
              </div>
              
              <div class="monitrix-barchart-container-right-small">  
                <div class="monitrix-barchart-axis-area-small" id="graph-urls-axis"></div>
                <div class="monitrix-barchart-chart-area-small" id="graph-urls"></div>
              </div>   
                        
              <div class="monitrix-barchart-x-label-small">
                Time    
                <!-- p style="float:right;">
                  <a title="View Fullscreen" href="javascript:$(createLightBox('/api/timeline/urls-crawled')).lightbox_me({destroyOnClose: true});">
                    <i class="icon-fullscreen"></i>
                  </a>
                </p -->
              </div>
            </div>  
          </div>
        </div>
        
        <div class="row-fluid" style="margin-top:40px">
          <div class="span6">
            <p class="pull-left">Number of New Hosts Crawled</p>
            <div class="btn-group pull-right" style="margin-right:35px;" data-toggle="buttons-radio">
              <button type="button" class="btn btn-mini btn-selected" onclick="redraw('graph-new-hosts', true);">Cumulative</button>
              <button type="button" class="btn btn-mini" onclick="redraw('graph-new-hosts', false);">Timeseries</button>
            </div>
            
            <div class="monitrix-barchart-container-small">      
              <div style="display:inline-block;">
                <span class="monitrix-barchart-y-label-small">No. of Hosts</span>
              </div>
              
              <div class="monitrix-barchart-container-right-small">  
                <div class="monitrix-barchart-axis-area-small" id="graph-new-hosts-axis"></div>
                <div class="monitrix-barchart-chart-area-small" id="graph-new-hosts"></div>
              </div>   
            
              <div class="monitrix-barchart-x-label-small">
                Time
                <!-- p style="float:right">
                  <a title="View Fullscreen" href="javascript:$(createLightBox('/api/timeline/new-hosts-crawled')).lightbox_me({destroyOnClose: true});">
                    <i class="icon-fullscreen"></i>
                  </a>
                </p -->
              </div>
            </div>
          </div>
            
          <div class="span6">
            <p class="pull-left">Completed Hosts</p>
            <div class="btn-group pull-right" style="margin-right:35px;" data-toggle="buttons-radio">
              <button type="button" class="btn btn-mini btn-selected" onclick="redraw('graph-completed-hosts', true);">Cumulative</button>
              <button type="button" class="btn btn-mini" onclick="redraw('graph-completed-hosts', false);">Timeseries</button>
            </div>
            
            <div class="monitrix-barchart-container-small">      
              <div style="display:inline-block;">
                <span class="monitrix-barchart-y-label-small">No. of Hosts</span>
              </div>
              
              <div class="monitrix-barchart-container-right-small">  
                <div class="monitrix-barchart-axis-area-small" id="graph-completed-hosts-axis"></div>
                <div class="monitrix-barchart-chart-area-small" id="graph-completed-hosts"></div>
              </div>   
              
              <div class="monitrix-barchart-x-label-small">
                Time
                <!-- p style="float:right;">
                  <a title="View Fullscreen" href="javascript:$(createLightBox('/api/timeline/completed-hosts')).lightbox_me({destroyOnClose: true});">
                    <i class="icon-fullscreen"></i>
                  </a>
                </p -->
              </div>
            </div>
          </div>            
        </div>
      </div>
    </div>
  </div>
  
  <script src="@routes.Assets.at("javascripts/bootstrap-button.js")" type="text/javascript"></script>
  <script src="@routes.Assets.at("javascripts/jquery.lightbox_me.js")" type="text/javascript"></script>
  <script>
    $('.btn-selected').button('toggle');
    
    function redraw(graph, cumulative) {
      // TODO should be made more generic later on
      // TODO should work locally, without another server roundtrip
      
      $('#' + graph).html('');
      $('#' + graph + "-axis").html('');
      
      switch(graph) {
        case 'graph-volume':
          loadGraph('/api/timeline/datavolume?maxpoints=100', 'graph-volume', 'Volume', '#c05020', cumulative, true, function(total) {
              total = total / (1024 * 1024 * 1024);
              $('#total-data-volume').html(total.toPrecision(4) + ' GB');	
          });
          break;
        case 'graph-urls':
            loadGraph('/api/timeline/urls-crawled?maxpoints=100', 'graph-urls', 'URLs', '#c05020', cumulative, true, function(total) {
                $('#total-urls-crawled').html(total);
            }); 
            break;
        case 'graph-new-hosts':
        	loadGraph('/api/timeline/new-hosts-crawled?maxpoints=100', 'graph-new-hosts', 'New Hosts', '#c05020', cumulative, true);
            break;
        case 'graph-completed-hosts':
        	loadGraph('/api/timeline/completed-hosts?maxpoints=100', 'graph-completed-hosts', 'Completed Hosts', '#c05020', cumulative, true);
            break;
      }
    }
    
    function cumulate(data) {
    	// Has room for optimization...
    	if (data.length > 1) {
    	  var cumulative = [ data[0] ];
    	  
    	  for (var i=1; i<data.length; i++)
      	    cumulative.push({x: data[i].x, y: (data[i].y + cumulative[i - 1].y)});
    	  
    	  return cumulative;
    	} else {
    		return data;
    	}
    }
    
    function loadGraph(url, divId, name, color, cumulative, opt_show_hover_detail, opt_total_callback) {
      $.getJSON(url, function(data) {
        if (data) {
          if (opt_total_callback) {
              var total = 0;
              $.each(data, function(idx, value) {
                total += value.y;
              });      	  
              opt_total_callback(total);
          }
            
          if (cumulative)
        	  data = cumulate(data);
          
          var total = 0;
          var graph = new Rickshaw.Graph({
            element: document.querySelector('#' + divId), 
            renderer: 'line',
            interpolation: 'linear',
            series: [{
              color: color,
              data: data,
              name: name
            }]
          });
          
          new Rickshaw.Graph.Axis.X({
        	  graph:graph,
        	  pixelsPerTick: 70,
        	  tickFormat: function(x) {
        		  var date = new Date(x);
        		  return date.getHours() + ":" + date.getMinutes(); 
        	  },
          });
          
          new Rickshaw.Graph.Axis.Y({
              graph: graph,
              tickFormat: function(y) {
            	  if (y >= 1000000000)
            		  return (y / 1000000000) + "G";
            	  if (y >= 1000000)
            		  return (y / 1000000) + "M";
            	  
            	  if (y >= 1000)
            		  return (y / 1000) + "k";
            	  
            	  return y;           	  
              },
              orientation:'left',
              element: document.getElementById(divId + '-axis')
          });
          
          if (opt_show_hover_detail) {
            new Rickshaw.Graph.HoverDetail({
              graph: graph,
              yFormatter: function(y) { 
            	  if (y > 1000000000)
            		  return (y / 1000000000).toFixed(2) + "G";
            	  if (y > 1000000)
            		  return (y / 1000000).toFixed(2) + "M";
            	  
            	  if (y > 1000)
            		  return (y / 1000).toFixed(2) + "k";
            	  
            	  return y;    
              },
              xFormatter: function(x) {
            	  return new Date(x).toString();
              }
            });
          }
              
          $('#' + divId).removeClass('graph-tumb-loading');
          graph.render();
        }
      });    	
    }
    
    function createLightBox(url) {
        var div = document.createElement('div');
        div.id = 'lightbox';
        div.style.width = '800px';
        div.style.height = '600px';
        div.style.background = "#fff";
        
        loadGraph(url + '?maxpoints=800', 'lightbox', 'Volume', '#c05020', true, function(total) {
            total = total / (1024 * 1024 * 1024);
            $('#total-data-volume').html(total.toPrecision(4) + ' GB');	
          });
        
        return div;
      }
    
    loadGraph('/api/timeline/datavolume?maxpoints=100', 'graph-volume', 'Volume', '#c05020', true, true, function(total) {
      total = total / (1024 * 1024 * 1024);
      $('#total-data-volume').html(total.toPrecision(4) + ' GB');	
    });
    
    loadGraph('/api/timeline/urls-crawled?maxpoints=100', 'graph-urls', 'URLs', '#c05020', true, true, function(total) {
      $('#total-urls-crawled').html(total);
    });  
    
    loadGraph('/api/timeline/new-hosts-crawled?maxpoints=100', 'graph-new-hosts', 'New Hosts', '#c05020', true, true);
    
    loadGraph('/api/timeline/completed-hosts?maxpoints=100', 'graph-completed-hosts', 'Completed Hosts', '#c05020', true, true);
  </script>
}